{{define "official-account.menus"}}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/statics/third-pkg/layui/css/layui.css">
    <link rel="stylesheet" href="/statics/admin/css/public.css" media="all">
    <link rel="stylesheet" href="/statics/third-pkg/layui-vue/css/index.css" />
</head>

<body>
<div id="app">
    <div class="menus_edit">
        <div class="menu_preview menu_preview_area">
            <div class="menu_preview-hd"></div>
            <div class="menu_preview-bd">
                <div  class="menu_preview-bottom">
                    <div class="menu_keyboard">
                        <div class="menu_keyboard-icon"></div>
                    </div>
                    <div class="menu_edit-add">
                        <div class="menu_list-wrap">
                            <template  v-if="menuList">
                                <li class="pre_menu_item" :class="{menu_active:menu.is_active}" :style="{ width:menu.is_active ? activeMenuWidth : menuWidth }" v-for="(menu,key) in menuList" :index="key">
                                    <a class="text-ellipsis">
                                        ${menu.name}
                                    </a>
                                    <div class="child-menu_list">
                                        <template v-if="!menu.childMenus || menu.childMenus.length<5">
                                            <div class="child-menu_item">
                                            <span  @click="addChildMenu(key)">
                                                <i class="layui-icon layui-icon-add-1"></i>
                                                添加
                                            </span>
                                            </div>
                                        </template>
                                        <template v-if="menu.childMenus && menu.childMenus.length">
                                            <div class="child-menu_item" :class="{menu_active:childMenu.is_active}"  v-for="(childMenu,key1) in menu.childMenus"  :index="key1">
                                                <span class="text-ellipsis">
                                                    ${childMenu.name}
                                                </span>
                                            </div>
                                        </template>
                                    </div>
                                </li>
                            </template>
                            <template v-if="menuList.length <3">
                                <template v-if="menuList.length==0">
                                    <li class="pre_menu_item" :style="{width:menuWidth}">
                                        <a  @click="addMenu">
                                            <i class="layui-icon layui-icon-add-1"></i>
                                            添加菜单
                                        </a>
                                    </li>
                                </template>
                                <template v-else>
                                    <li class="pre_menu_item" :style="{width:menuWidth}">
                                        <a  @click="addMenu">
                                            <i class="layui-icon layui-icon-add-1"></i>
                                        </a>
                                    </li>
                                </template>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <lay-form v-if="Object.keys(activeMenu).length > 0" :rules="rules" :model="activeMenu" class="layui-form layuimini-form menu_preview_area" style="width: 500px;">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>菜单信息</legend>
            </fieldset>
            <lay-form-item label="名称" prop="name" required >
                <lay-input v-model="activeMenu.name"></lay-input>
                <div class="layui-word-aux" style="margin-top: 20px;" >
                    仅支持中英文和数字，字数不超过4个汉字或8个字母。
                </div>
            </lay-form-item>


            <lay-form-item label="跳转类型" prop="jump_type" required>
                <lay-radio v-model="activeMenu.jump_type" name="jump_type" :value="1" label="网页"></lay-radio>
                <lay-radio v-model="activeMenu.jump_type" name="jump_type" :value="2" label="小程序"></lay-radio>
            </lay-form-item>
            <template  v-if="activeMenu.jump_type==1">
                <lay-form-item label="网址" prop="url" required >
                    <lay-input v-model="activeMenu.url"></lay-input>
                </lay-form-item>
            </template>
            <template  v-if="activeMenu.jump_type==2">
                <lay-form-item label="AppId" prop="appId" required >
                    <lay-input v-model="activeMenu.appId"></lay-input>
                </lay-form-item>
                <lay-form-item label="路径" prop="path" required >
                    <lay-input v-model="activeMenu.path"></lay-input>
                </lay-form-item>
            </template>
        </lay-form>

    </div>
    <div class="layui-form-item" style="margin-top:20px">
        <div class="layui-input-block" style="margin-left:calc(50% - 100px)">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="send">发布</button>
        </div>
    </div>
</div>
<script src="/statics/third-pkg/layui/layui.js"></script>
<script src="/statics/admin/js/lay-config.js?v=2.0" charset="utf-8"></script>
<script src="/statics/third-pkg/vue/vue.js"></script>
<script src="/statics/third-pkg/layui-vue/layui-vue.js"></script>
<script>

    layui.use(['form','request','layer','miniTab',"common"], function() {
        var layer = layui.layer,
            request=layui.request,
            common=layui.common;
            const App = {
                data() {
                    return {
                        menuList:[],
                        activeMenu:{

                        },
                        rules:{
                            _this:this,
                            name : {
                                //fix
                                //仅支持中英文和数字，字数不超过8个汉字或16个字母。
                                validator(rule, value, callback, source, options){
                                    if ((app.activeMenu.is_child && common.getByteLength(value) > 16) || common.getByteLength(value) > 8) {
                                        callback(new Error(`字数超过上限`));
                                    } else {
                                        return true;
                                    }
                                }
                            },
                        }
                    };
                },
                methods:{
                    addMenu(){
                        this.menuList.forEach(function (item) {
                            item.is_active=false;
                            if(item.childMenus){
                                 item.childMenus.forEach(function (item1){
                                     item1.is_active=false;
                                })
                            }
                        })
                        this.activeMenu={
                            name:"菜单名称",
                            jump_type:1,
                            is_child:false
                        }
                        this.menuList.push(Object.assign(this.activeMenu,{
                            is_active:true
                        }))

                    },
                    addChildMenu(parent_key){
                        this.activeMenu={
                            name:"菜单名称",
                            jump_type:1,
                            is_child:true,
                            parent_index:parent_key
                        };
                        this.menuList.forEach(function (item) {
                            if(item.childMenus){
                                 item.childMenus.forEach(function (item1){
                                    return item1.is_active=false;
                                })
                            }
                        })
                        if(!this.menuList[parent_key]["childMenus"]){
                            this.menuList[parent_key]["childMenus"]=[];
                            this.menuList[parent_key].is_active=false;
                        }
                        this.menuList[parent_key]["childMenus"].push(Object.assign(this.activeMenu,{
                            is_active:true
                        }));
                    }
                },
                computed:{
                    menuWidth(){
                        if(this.menuList.length==0){
                            return 100+"%";
                        }else{
                            if(this.menuList.length==3){
                                return `33.33%`;

                            }else{
                                var width=Math.floor(100/(this.menuList.length+1))+"%";
                                return width;
                            }
                        }

                    },
                    activeMenuWidth(){
                        return `calc(${this.menuWidth} - 2px)`
                    }
                }
            };

            const app = Vue.createApp(App);
            app.config.compilerOptions.delimiters = ['${', '}']
            app.use(LayuiVue);
            app.mount("#app");

    });
</script>
</body>
<style>
    body {
        background-color: #ffffff;
    }
    .text-ellipsis{
        display: block;
        border-top: 1px solid #E7E7EB;
        width: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        cursor: pointer;
    }
    .child-menu_list {
        position: absolute;
        bottom: 60px;
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }
    .child-menu_list .child-menu_item{
        border: 1px solid #E7E7EB;
        background-color: #FFFFFF;
        border-radius: 5px;
    }
    .child-menu_list .child-menu_item:first-child{
        position: relative;
    }
    .child-menu_list .child-menu_item:first-child::before{
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        bottom: -6px;
        border-width: 6px;
        border-style: dashed;
        border-color: transparent;
        border-bottom-width: 0;
        border-top-color: #D0D0D0;
        border-top-style: solid;
        margin-left: -6px;
    }

    .child-menu_list .child-menu_item:first-child::after{
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        bottom: -5px;
        width: 0;
        height: 0;
        border-width: 6px;
        border-style: dashed;
        border-color: transparent;
        border-bottom-width: 0;
        border-top-color: #FAFAFA;
        border-top-style: solid;
        margin-left: -6px;
    }

    .layui-form-radio {
        display: block;
    }
    .menu_active {
        border: 1px solid #07c160!important;
    }
    .menu_active a {
        color: #07c160!important;
    }
    .menu_preview .menu_preview-hd {
        background-size: cover;
        background-image:url("/statics/admin/images/phone-header.png") ;
        height: 70px;
    }
    .menu_preview {
        border-radius: 8px;
        width: 300px;
        background-color: #fdfdfd;
        margin-right: 24px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        max-height: 634px;
        -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.05);
        box-shadow: 0 1px 5px 0 rgba(0,0,0,.05);
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }
    .menu_preview_area {
        float: left;
        margin-right: 12px;
        position: relative;
    }
    .menu_preview .menu_preview-bd {
        height: 430px;
        position: relative;
        background-color: rgb(244, 245, 249);
        border-radius: 0 0 8px 8px;
    }
    .menu_preview .menu_preview-bd .menu_preview-bottom{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-shadow: inset 0 0.5px 0 #e3e4e5;
        box-shadow: inset 0 0.5px 0 #e3e4e5;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #fff;
        border-radius: 0 0 8px 8px;
    }
    .menu_preview .menu_preview-bd .menu_preview-bottom .menu_keyboard {
        width: auto;
        height: 100%;
        padding: 0 2px;
    }
    .menu_preview .menu_preview-bd .menu_preview-bottom .menu_keyboard .menu_keyboard-icon {
        width: 40px;
        height: 100%;
        background: url("/statics/admin/images/phone-menu-switch.svg") 50% no-repeat;
    }
    .menu_preview .menu_preview-bd .menu_preview-bottom .menu_edit-add {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    .menu_preview .menu_preview-bd .menu_preview-bottom .menu_edit-add  .menu_list-wrap{
        width: 100%;
        height: 100%;
    }
    .pre_menu_item{
        cursor: pointer;
        position: relative;
        float: left;
        line-height: 48px;
        text-align: center;
        height: 48px;
    }
    .pre_menu_item a {
        margin:0 10px;
    }
    .menus_edit {
        overflow: hidden;
    }

</style>
</html>
{{ end }}